<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<script language="javascript" type="text/javascript">
	$(document).ready(function(e) {
		$('#itemsNameFilter').keypress(function(event) {
			if (event.which==13) {
				$('#filterItemsBtn').click();
				return false;
			}
		});
	});
</script>

<div id="suppliersForm">
	<h2>
		<c:choose>
			<c:when test="${not empty supplierBean.id}"><fmt:message key="header.editSupplier"/></c:when>
			<c:otherwise><fmt:message key="header.addSupplier"/></c:otherwise>
		</c:choose>
	</h2>
	
	<form:form modelAttribute="supplierBean">
		<div class="form_holder">
			<div class="left_col">
				<div class="row">
					<div class="label_holder">
						<fmt:message key="site.name"/>:
					</div>
					<div class="input_holder">
						<form:input path="name"/>
					</div>
				</div>
				<div class="row">
					<div class="label_holder">
						<fmt:message key="site.email"/>:
					</div>
					<div class="input_holder">
						<form:input path="email"/>
					</div>
				</div>
				<div class="row">
					<div class="label_holder">
						<fmt:message key="site.phoneNumber"/>:
					</div>
					<div class="input_holder">
						<form:input path="phoneNumber"/>
					</div>
				</div>
			</div>
			<div class="right_col">
				<div class="row">
					<div class="label_holder">
						<fmt:message key="site.address"/>:
					</div>
					<div class="textarea_holder">
						<form:textarea path="address"></form:textarea>
					</div>
				</div>
			</div>
		</div>
		
		<div class="items_management_holder">
			<div class="left_col">
				<div>
					<label class="title"><fmt:message key="site.suppliedItems"/>:</label>
				</div>
				<div class="items_holder">
					<form:select path="itemIds" multiple="multiple">
						<c:forEach var="item" items="${supplierBean.items}">
							<option value="${item.id}">${item.name}</option>
						</c:forEach>
					</form:select>
				</div>
			</div>
			
			<div class="middle_col">
				<div>
					<img src="<c:url value="/images/buttons/arrows_left_btn.PNG"/>" onclick="moveSelectedElements('filteredItemsSelect', 'itemIds')"/>
				</div>
				<div class="btn_holder">
					<img src="<c:url value="/images/buttons/arrows_right_btn.PNG"/>" onclick="moveSelectedElements('itemIds', 'filteredItemsSelect')"/>
				</div>
			</div>
			
			<div class="right_col">
				<div>
					<label class="title"><fmt:message key="site.items"/>:</label>
				</div>
				<div class="items_holder">
					<select id="filteredItemsSelect" multiple="multiple">
						<c:forEach var="item" items="${filteredItems}">
							<option value="${item.id}">${item.name}</option>
						</c:forEach>
					</select>
				</div>
				<div class="filter_holder">
					<fmt:message key="site.itemsNameFilter"/>:
					<form:input path="itemsNameFilter" cssClass="filter_input"/>
					<input id="filterItemsBtn" type="submit" name="_eventId_filterItems" style="display: none;"/>
				</div>
			</div>
		</div>
		
		<div class="btn_row">
			<input type="image" name="_eventId_save" value="<fmt:message key="button.save"/>" src="<c:url value="/images/buttons/save_btn.PNG"/>" onclick="selectListElements('itemIds')"/>
			<input type="image" name="_eventId_cancel" value="<fmt:message key="button.cancel"/>" src="<c:url value="/images/buttons/cancel_btn.PNG"/>" class="margin_left_btn"/>
		</div>
	</form:form>
</div>